<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旅游门票预定</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.center {
				width: 1000px;
				margin: 0 auto;
			}

			body {
				background-color: #F4F4F4;
			}

			.main .center {
				display: flex;
				justify-content: center;
			}

			/* 左侧订票区 */
			.main .left {
				margin-top: 20px;
				border-top: 2px solid #008AFF;
				padding: 20px;
				color: #555;
				flex: 3;
				background-color: #fff;
			}

			.main .left .f1 {
				border-bottom: 1px solid #aaa;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.main .left .f1 p {
				padding: 10px;
				font-size: 20px;
			}
			/* 日期选择区 */
			.main .left .f2 {
				display: flex;
				align-items: center;
			}

			.main .left .f2 .date ul {
				display: flex;
				margin-left: 10px;
			}

			.main .left .f2 .date ul li {
				border: 1px solid #bbb;
				padding: 10px;
				margin: 10px 10px 5px;
			}

			.main .left .f2 .date ul li h4 {
				color: #FF6600;
				text-align: center;
			}

			.main .left .f2 .date>div {
				display: flex;
				color: #008AFF;
				font-size: 12px;
				justify-content: space-around;
			}
			/* 购买张数选择区 */
			.main .left .f3 {
				display: flex;
				align-items: center;
				margin: 20px 0;

			}

			.main .left .f3 div:nth-child(1) {
				margin-right: 20px;
			}

			.main .left .f3 button {
				padding: 0;
				width: 28px;
				height: 30px;
				background-color: #fff;
				border: 1px solid #aaa;
			}

			.main .left .f3 input {
				width: 50px;
				height: 26px;
				outline: none;
				padding: 0 10px;
			}

			.main .left .f3 div:nth-child(3) {
				font-size: 14px;
				margin-left: 20px;
			}

			/* 用户信息区 */
			.main .user .user_f1 {
				display: flex;
				align-items: center;
				padding: 10px;
				border-bottom: 1px solid #aaa;
				margin: 20px 0;

			}

			.main .user .user_f1 div:nth-child(1) {
				font-size: 20px;
			}

			.main .user .user_f1 div:nth-child(2) {
				margin: 0 20px;
				font-size: 14px;
				color: #aaa;
			}

			.main .user .user_f1 div:nth-child(3) {
				font-size: 14px;
			}

			.main .user .user_f1 div:nth-child(3) a {
				color: #008AFF;
			}

			.main .user .user_msg {
				border-bottom: 1px solid #aaa;
			}

			.main .user .user_msg .form-group {
				display: flex;
				justify-content: space-between;
				width: 250px;
				padding: 10px;

			}

			.main .user .user_msg .form-group input {
				outline: none;
				padding: 5px;
			}

			.main .user .user_msg>input {
				margin: 0 0 30px 30px;

			}
			/* 提交区 */
			.main .left .submit {
				margin: 50px;
			}
			.main .left .submit a {
				color: #555;
				font-size: 14px;
			}
			.main .left .submit button {
				background-color: #FE8101;
				display: block;
				width: 140px;
				height: 40px;
				border: 0;
				font-size: 20px;
				color: #fff;
				border-radius: 3px;
				margin: 50px auto;
				
			}
			/* 右侧注意事项区 购票须知 */
			.main .right {
				flex: 1;
				background-color: #fff;
				margin: 20px;
				padding: 20px;
			}
			.main .right .title {
				color: #008AFF;
				font-size: 20px;
			}
			.main .right .refund,.main .right .msg {
				color: #555;
				padding: 20px;
			}
			.main .right h4 {
				margin-bottom: 10px;
			}
			.main .right p {
				line-height: 1.5em;
				font-size: 14px;
			}
			.main .right button {
				display: block;
				margin: 20px auto;
				border: 1px solid #aaa;
				background-color: #fff;
				padding: 10px 30px;
				border-radius: 3px;
			}
			.main .right button a {
				color: #555;
			}
			.main .right .total {
				margin-top: 50px;
				border-top: 1px solid #aaa;
				text-align: center;
				padding: 20px;
				color: #555;
			}
			.main .right .total span:nth-child(2) {
				color: #FF6600;
			}
			/* 购买详情的遮罩层区 */
			#mask {
				background-color: rgba(0, 0, 0, .3);
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				display: none;
			}
			#mask .detail {
				position: absolute;
				width: 300px;
				height: 300px;
				top: 0;
				right: 0;
				left: 0;
				bottom: 0;
				margin: auto;
				background-color: #fff;
			}
			
		</style>
	</head>
	<body>
		<div class="nav">
			<iframe src="nav.html" frameborder="0" width="100%" height="100px" scrolling="no"></iframe>
		</div>
		<div class="main">
			<div class="center">
				<div class="left">
					<div class="f1">
						<p>飞来峰门票（不含灵隐寺）成人票（6:30-12:00）</p>
						<span>¥45/张</span>
					</div>
					<div class="f2">
						<span>游玩日期</span>
						<div class="date">
							<ul>
								<li>
									<span>今天(8月1日)</span>
									<h4>不可用</h4>
								</li>
								<li>
									<span>明天(8月2日)</span>
									<h4>￥45</h4>
								</li>
								<li>
									<span>后天(8月3日)</span>
									<h4>￥45</h4>
								</li>
								<li>其他日期</li>
							</ul>
							<div>
								<p>游玩日期:2022年08月03日</p>
								<p> 请在游玩当天的17:00前完成预订</p>
							</div>
						</div>
					</div>
					<div class="f3">
						<div>购买张数</div>
						<div>
							<button>-</button>
							<input type="text" value="1">
							<button>+</button>
						</div>
						<div>最多订购5张</div>
					</div>
					<!-- 游客信息区 -->
					<div class="user">
						<div class="user_f1">
							<div>游客信息</div>
							<div>请填写所有1位游客信息</div>
							<div>
								<a href="register.html">登录</a>
								<span>查看常用联系人</span>
							</div>
						</div>
						<!-- 用户具体信息区 -->
						<div class="user_msg">
							<div class="form-group">
								<label for="uname">姓名：</label>
								<input type="text" id="uname" placeholder="需与证件姓名一致" value="">
							</div>
							<div class="form-group">
								<label for="upwd">手机号：</label>
								<input type="password" id="upwd" placeholder="请填写手机号">
							</div>
							<div class="form-group">
								<label for="re-upwd">身份证：</label>
								<input type="password" id="re-upwd" placeholder="请填写真是证件号码">
							</div>
							<input type="checkbox" checked>保存常用联系人
						</div>

					</div>
					<!-- 提交区 -->
					<div class="submit">
						<input type="checkbox" checked><a href="#">我已阅读并接受合同条款、补充条款及其他所有内容</a>
						<button>提交订单</button>
					</div>
				</div>
				<!-- 右侧 购票须知 -->
				<div class="right">
					<div class="title">购票须知</div>
					<div class="refund">
						<h4>退款限制</h4>
						<p>使用日期截止后21天00:00前可申请退款</p>
						<p>不支持部分退款</p>
					</div>
					<div class="msg">
						<h4>入园信息</h4>
						<p>景点名称：灵隐景区</p>
						<p>入园日期：游玩日期当天有效</p>
						<p>入园方式：凭去哪儿发送的电子票直接验证入园</p>
					</div>
					<button><a href="#mask">详情购买须知&gt;&gt;</a></button>
					<div class="total">
						<span>订单总额</span>
						<span>￥45</span>
						<span>(1张)</span>
					</div>
				</div>
				<div id="mask">
					<div class="detail">预留的内容区域</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<iframe src="foot.html" frameborder="0" width="100%" scrolling="no" height="300px"></iframe>
		</div>
	</body>
</html>
